<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">

</head>
<body>
<div class="layui-fluid">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>注册账户</legend>
        <div class="layui-field-box">
            <div class="layui-col-md6">
                <form class="layui-form" id="adduser">
                    <div class="demo-reg-container">
                        <div class="layui-form-item">
                            <img class="layui-upload-img" id="ID-upload-demo-img" name="img"
                                 style="width:92px;height: 92px;border: 1px solid rgba(0,0,0,0.1)">
                                 <div id="ID-upload-demo-text"></div>
                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn layui-btn-normal" type="button" id="btnadduser">
                                <i class="layui-icon layui-icon-upload"></i>
                                选择头像
                            </button>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别:</label>
                            <div class="layui-input-block">
                                <input type="radio" name="sex" value="1" title="男" checked>
                                <input type="radio" name="sex" value="2" title='女'>
                                
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名:</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="text" name="username" id="username" lay-verify="required"
                                       lay-verType="tips" lay-reqText="请输入用户名">
                            </div>
                            <label class="layui-form-label">电话:</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="text" name="phone" id="phone" lay-verify="required"
                                       lay-verType="tips" lay-reqText="请输入电话">
                            </div>

                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    <i class="layui-icon layui-icon-password"></i>
                                </div>
                                <input type="password" name="password" value="" lay-verify="required" lay-vertype="tips" lay-reqtext="请输入密码" placeholder="密码" autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    <i class="layui-icon layui-icon-password"></i>
                                </div>
                                <input type="password" name="confirmPassword" value="" lay-verify="required|confirmPassword" lay-vertype="tips" lay-reqtext="请输入确认密码" placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg" id="demo-reg">注册</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </fieldset>
</div>
<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        //获取文件上传组件
        var upload = layui.upload;
        //日期组件
        var laydate = layui.laydate;

        upload.render({
            elem: '#btnadduser',
            auto:false,
            field:'myfile',
            accept:'img',
            acceptMime:'img/*',
            choose: function(obj){
              // 预读本地文件示例，不支持ie8
              obj.preview(function(index, file, result){
                //获取文件名称
                let fname = file.name 
                //截取掉文件后缀
                let i = fname.lastIndexOf('.')   
                fname = fname.substring(0,i)  
                //填充文件名到指定输入框控件 
                $('#username').val(fname)

               $('#ID-upload-demo-img').prop('src', result); // 图片链接（base64）
              });
            },
        });

        // 自定义验证规则
        form.verify({
            // 确认密码
            confirmPassword: function(value, item){
                var passwordValue = $('#reg-password').val();
                if(value !== passwordValue){
                    return '两次密码输入不一致';
                }
            }
        });

        $('#demo-reg').on('click',function(){
            //获取表单数据,并封装为formData对象
            let formData = new FormData($('#adduser')[0])
            $.ajax({
                url:'http://127.0.0.1:8080/user/reg',
                type:'POST',
                processData:false,
                contentType:false,
                data:formData,
                success:function(resp){
                    if(resp.code === 0){
                        layer.msg(resp.msg)
                    }else{
                        layer.alert(resp.msg,{icon:2})
                    }    
                }
            })
        })

    })
</script>
</body>
</html>